<template>
	<view class="content">
		<view class="header">
			<view class="headerTitle">我的订单</view>
			<scroll-view scroll-x="true" class="scroll-Y">
				<view  class="titleText" :class="{'font':curentIndex == index}" v-for="(item,index) in titleList" :key="index" @click="navtab(index)">
					{{item}}
					<text class="xian" v-if="curentIndex == index"></text>
				</view>
			</scroll-view>
		</view>
		<view class="box">
			<view class="boxList" v-for="(item,index) in list" :key="index">
				<view class="boxTitle">
					<view class="boxTitleLeft">{{item.status}}</view>
					<view class="boxTitleRight">{{item.userStatus}}</view>
				</view>
				<view class="boxBg" v-if="item.statusImg >= 1"></view>
				<view class="boxBottom" v-for="(items,indexs) in item.childer" :key="indexs">
					<image class="boxBottomImg" :src="items.img" mode=""></image>
					<view class="boxBottomText">{{items.userName}}</view>
					<view class="boxBottomNum">X{{items.number}}</view>
				</view>
				<view class="boxBtn">
					<view class="boxBtnPrice">￥{{item.price}}</view>
					<view class="boxBtnUser">联系商家</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		data() {
			return{
				titleList: ['全部(99)','待支付' ,'进行中','已取消','已完成'],
				curentIndex: 0,
				list: [
					{
						id: 1,
						status: '待自取',
						userStatus: '商家已接单',
						statusImg: 1,
						price: '268.0',
						childer: [
							{
								cid: 1,
								img: '../../static/image/good-img.png',
								userName: '比利时GuyLian吉利莲魅炫海马巧克力礼听01g 进口生日礼物品零食',
								number: 1
							}
						]
					},
					{
						id: 2,
						status: '已完成',
						// userStatus: '正在配送中',
						statusImg: 0,
						price: '268.0',
						childer: [
							{
								cid: 1,
								img: '../../static/image/good-img.png',
								userName: '比利时GuyLian吉利莲魅炫海马巧克力礼听01g 进口生日礼物品零食',
								number: 1
							},
							{
								cid: 2,
								img: '../../static/image/good-img.png',
								userName: '比利时GuyLian吉利莲魅炫海马巧克力礼听01g 进口生日礼物品零食',
								number: 1
							}
						]
					}
				]
			}
		},
		methods: {
			navtab(index) {
				this.curentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 解决小程序和app滚动条的问题 */ /* #ifdef MP-WEIXIN || APP-PLUS */ ::-webkit-scrollbar{ display: none; }/* #endif */ /* 解决H5 的问题 *//* #ifdef H5 */ uni-scroll-view .uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */ display: none } /* #endif */
	.content{
		width: 100%;
		background-color: #F5F5F5;
		position: absolute;
	}
	.font{
		color: #343434 !important;
		font-size: 30rpx !important;
	}
	.header{
		width:100%;
		height: 100px;
		padding: 20rpx;
		.headerTitle{
			color: #343434;
			font-size: 32rpx;
			margin: 0 0 60rpx 0;
			font-weight: 600;
		}
		.scroll-Y{
			width: 100%;
			height: 90rpx;
			line-height: 60rpx;
			white-space: nowrap;
			.titleText{
				display: inline-block;
				width: 20%;
				color: #9A9A9A;
				font-size: 26rpx;
				text-align: center;
				position: relative;
				padding-bottom:20rpx;
				.xian{
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 20%;
					border: 6rpx solid red;
					border-radius: 20px;
				}
			}
		}
	}
	.box{
		padding:20rpx;
		.boxList{
			background-color: #fff;
			padding: 35rpx 23rpx;
			border-radius: 20rpx;
			margin-bottom:60rpx;
			.boxTitle{
				line-height: 40rpx;
				display: flex;
				justify-content: space-between;
				.boxTitleLeft{
					color: #333333;
					font-weight: 600;
					font-size: 30rpx;
				}
				.boxTitleRight{
					color: #333333;
					font-size: 28rpx;
				}
			}
			.boxBg{
				height: 310rpx;
				background-color: #525E78;
				margin: 20rpx 0;
			}
			.boxBottom{
				width: 90%;
				margin: 20rpx auto;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-content: center;
				border-bottom: 2rpx #E6E6E6 dotted;
				.boxBottomImg{
					width: 75rpx;
					height: 75rpx;
					margin-top: 10rpx;
					margin-right: 45rpx;
				}
				.boxBottomText{
					flex: 1;
					color: #4D4D4D;
					line-height: 40rpx;
					font-size: 26rpx;
				}
				.boxBottomNum{
					width: 20%;
					// height: 30rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}
			.boxBtn{
				display: flex;
				justify-content: space-between;
				align-items:center;
				.boxBtnPrice{
					color: #F8A131;
					font-size: 30rpx;
				}
				.boxBtnUser{
					padding: 20rpx;
					line-height: 30rpx;
					border: 2rpx solid #999999;
					border-radius: 40rpx;
					font-size: 30rpx;
				}
			}
		}
	}
</style>